<template>
  <!-- 容器组件 用于渲染子盒子 -->
  <transition name="up">
    <div
      class="showInfobox"
      :id="props.id"
      @click="close"
      :style="{ left: props.left, top: props.top }"
    >
      我是弹出层组件
      <slot />
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  left: {
    type: String,
    default: "",
  },
  top: {
    type: String,
    default: "",
  },
  id:{
    type: String,
    default: "contentId",
  }
});
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all v-bind(duration);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.up-enter-active,
.up-leave-active {
  transition: all v-bind(duration);
}

.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translate3d(-50%, -100%, 0);
}

.showInfobox {
  position: absolute;
  top: 200px;
  border: 1px solid #000;
  left: 50%;
  transform: translateX(-50%);
  background-color: red;
}
</style>
